<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../base/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ssm:overwrite name="context">
<div class="table-responsive">
		<div id="tableBtn">
			<a href="<c:url value="/menu/edit"/>">
				<button class="btn btn-success">
					<i class="icon-edit icon-only bigger-150"></i>
				</button>
			</a> <a class="ajax-post"
				url="<c:url value="/menu/changeStatus?method=del"/>"
				target-form="ids">
				<button class="btn btn-sm btn-danger">
					<i class="icon-trash bigger-150"></i>
					删除
				</button>
			</a>
			<a class="ajax-post"
				url="<c:url value="/menu/changeStatus?method=open"/>"
				target-form="ids">
				<button class="btn btn-sm btn-info">
					<i class="icon-unlock bigger-150"></i>
					开启
				</button>
			</a>
			<a class="ajax-post"
				url="<c:url value="/menu/changeStatus?method=close"/>"
				target-form="ids">
				<button class="btn btn-sm btn-pink">
					<i class="icon-lock bigger-150"></i>
					关闭
				</button>
			</a>
		</div>
		<table id="sample-table"
			class="table table-striped table-bordered table-hover">
			<thead>
				<tr>
					<th class="center"><label> <input type="checkbox"
							class="ace" /> <span class="lbl"></span>
					</label></th>
					<td>createuserid</td>
				<td>pid</td>
				<td>rank</td>
				<td>title</td>
				<td>link</td>
				<td>description</td>
				<td>createtime</td>
				<td>status</td>
				<td>操作</td>
				</tr>
			</thead>

			<tbody>
				<c:forEach items="${LIST}" var="item">
					<tr>
						<td class="center"><label> <input type="checkbox"
								class="ace ids" name="id" value="${item.id}"  /> <span class="lbl"></span>
						</label></td>
						<td>${item.createuserid}</td>
				<td>${item.pid}</td>
				<td>${item.rank}</td>
				<td>${item.title}</td>
				<td>${item.link}</td>
				<td>${item.description}</td>
				<td><ssm:FormatDate value="${item.createtime}" pattern="yyyy/MM/dd HH:mm:ss"/></td>
				<td><c:choose>
					<c:when test="${item.status==1}">
						<a href="<c:url value="/menu/changeStatus?id=${item.id}&method=close"/>">开启</a>
					</c:when>
					<c:when test="${item.status==0}">
						<a href="<c:url value="/menu/changeStatus?id=${item.id}&method=open"/>">关闭</a>
					</c:when>
				</c:choose></td>
						<td>
							<div
								class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
								 <a class="green"
									href="<c:url value="/menu/edit?id=${item.id}"/>"> <i
									class="icon-pencil bigger-130"></i>
								</a> <a class="red" href="<c:url value="/menu/changeStatus?id=${item.id}&method=del "/>">
									<i class="icon-trash bigger-130"></i>
								</a>
							</div>

							<div class="visible-xs visible-sm hidden-md hidden-lg">
								<div class="inline position-relative">
									<button class="btn btn-minier btn-yellow dropdown-toggle"
										data-toggle="dropdown">
										<i class="icon-caret-down icon-only bigger-120"></i>
									</button>

									<ul
										class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
										<li><a
											href="<c:url value="/menu/edit?id=${item.id}"/>"
											class="tooltip-success" data-rel="tooltip" title="Edit">
												<span class="green"> <i class="icon-edit bigger-120"></i>
											</span>
										</a></li>

										<li><a
											href="<c:url value="/menu/changeStatus?id=${item.id}&method=del "/>"
											class="tooltip-error" data-rel="tooltip" title="Delete">
												<span class="red"> <i class="icon-trash bigger-120"></i>
											</span>
										</a></li>
									</ul>
								</div>
							</div>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>

</ssm:overwrite>

<ssm:overwrite name="script">
	<!-- page specific plugin scripts -->

	<script src="${STATIC}/js/jquery.dataTables.min.js"></script>
	<script src="${STATIC}/js/jquery.dataTables.bootstrap.js"></script>


	<!-- inline scripts related to this page -->

	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table').dataTable({
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, null, null, null, {
					"bSortable" : false
				} ],
				bPaginate : false
			});

			$('table th input:checkbox').on(
					'click',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});

					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}
			function addBtnAndPageHtml(domName) {
				$str = '${PAGE_HTML}';
				$root = $(domName).parent();
				$btn = $root.children('div[class="row"]:first-child').children(
						'div:first-child');
				$page = $root.children('div[class="row"]:last-child').children(
						'div:last-child');
				$btn.append($('#tableBtn'));
				$page.append($str);
			}
			addBtnAndPageHtml('#sample-table');

		})
	</script>
</ssm:overwrite>
<jsp:include page="../base/base.jsp"></jsp:include>